<script setup lang="ts"> 
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Toolbar from '@/components/Toolbar.vue'
import { tabStore } from '@/stores/tabs'
import { ClickOutside as vClickOutside } from 'element-plus'

const store = tabStore()
const router = useRouter()
const route = useRoute()
const activeName = ref(store.activeTabName)
const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
})
const visible = ref(false)
const triggerRef = ref({
  getBoundingClientRect() {
    return position.value
  },
})
const clickedTabTitle = ref()

watch(activeName, async(newActiveName:string)=>{
  if(newActiveName.length > 0){
    store.setActiveTabName(newActiveName)
    router.push({name: newActiveName, params: store.toTab.params, query: store.toTab.query, hash: store.toTab.hash})
  }
})

onMounted(()=>{
  if(store.activeTabName && route.name != store.activeTabName){
    router.push({name: store.activeTabName, params: store.toTab.params, query: store.toTab.query, hash: store.toTab.hash})
  }
})

async function handleRemove(name: string){
  await store.removeTab( name )
  activeName.value = store.activeTabName
  if(!activeName.value.length){
    router.push("/")
  }
}

function rightMouse(ev: MouseEvent){
  const element = ev.target as Element
  if(element?.getBoundingClientRect() && element.classList.contains('el-tabs__item')){
    position.value = element.getBoundingClientRect()
    visible.value = true
    clickedTabTitle.value = element.textContent
  }
}

async function closeAllTabs(){
  visible.value = false
  store.closeOthers(clickedTabTitle.value).then(name =>{
    if(name?.length){
      handleRemove(name)
    }else{
      router.push('/')
    }
  })
}

function closeOtherTabs(){
  visible.value = false
  store.closeOthers(clickedTabTitle.value).then(name =>{
    if(name?.length){
      activeName.value = name
    }else{
      router.push('/')
    }
  })
}

function onClickOutside(){
  visible.value = false
}


store.$onAction(({name, after})=>{
  after(result=>{
    if('addTab' == name){
      activeName.value = store.activeTabName
    }
  })
})
</script>

<template>
  <el-container>
      <el-aside class="toolbar">
        <Toolbar />
      </el-aside>
      <el-main class="right px-2 py-0">        
          <el-tabs v-if="store.tabList.length" v-model="activeName"  closable @tab-remove="handleRemove" class="main-tabs" @click.right.prevent="rightMouse">
            <el-tab-pane v-for="item in store.tabList" :key="item.name" :label="item.title" :name="item.name" v-click-outside="onClickOutside"/>
          </el-tabs>  
          <el-popover
            :visible="visible"
            placement="bottom"
            :width="130"
            :offset="1" 
            trigger="contextmenu"
            :virtual-ref="triggerRef"
            virtual-triggering
          >
            <el-text class="rightMenu" size="small" @click="closeAllTabs">关闭全部</el-text>
            <el-text class="rightMenu mt-2" size="small" @click="closeOtherTabs">关闭其他</el-text>
          </el-popover>          
        <RouterView class="main"/>
      </el-main>
  </el-container>
</template>

<style lang="css" scoped>
.toolbar{
    width: 45px;
    height: 100vh;
    background-color: #f0f0f0;
 }
 .right{
    background-color: #b3c4e3;
 }
 .main{
  padding: 3px;
  background-color: white;
  height: calc(100vh - 63px);
  overflow: auto;
}
.rightMenu{
  display: block;
  padding: 4px;
}
.rightMenu:hover{
  background-color: var(--el-fill-color-light);
  cursor: pointer;
}
</style>

<style>
.main-tabs > .el-tabs__header {
  padding-left: 3px;
  padding-right: 3px;
  background-color: white;
  margin-bottom: 6px;
}
</style>
